import React, { Component } from 'react'
class Field extends Component {
    state = {
        value: ''
    }
    clear(){this.setState({ value:''})}
    setValue(value){
        this.setState({ value:value})
    }
    render() {
        return (
            <div style={{ background: 'yellow' }}>
                <label>{this.props.uname}</label>
                <input type={this.props.type} onChange={(e) => { this.setState({ value: e.target.value }) }} value={this.state.value}/>
            </div>
        )
    }
}

export default class App extends Component {
    uname=React.createRef()
    password=React.createRef()
    render() {
        return (
            <div>
                <h1>login</h1>
                <Field label="uname" type="text" ref={this.uname}/>
                <Field label="password" type="password" ref={this.password}/>
                <button onClick={() => {console.log('uname',this.uname.current.state.value,'password',this.password.current.state.value) }}>login</button>
                <button onClick={() => {this.uname.current.clear()
                    this.password.current.clear()}}>cancle</button>
            </div>
        )
    }
}
